<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div id="main" style="width: 500px;height: 500px;"></div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    dd:[]

                }
            },
            methods: {
                data() {
                    axios.get("./js/ks1.json").then(res => {
                        console.log(res.data);
                        this.dd=res.data;
                        this.charts();

                    })
                },
                charts() {
                    let mycharts = echarts.init(document.getElementById("main"));
                    mycharts.setOption(option = {
                        title: {
                            text: "关系图"
                        },
                        series: [{
                            type: 'graph',
                            label: {
                                show: true,
                                position: 'bottom'
                            },
                            edgeSymbolSize: [4, 8],
                            edgeLabel: {
                                show: true,
                                formatter: "{c}"
                            },
                            edgeSymbol: ['circle', 'arrow'],//表示线的关系
                            // categories:json.categories,
                            categories:this.dd.categories,

                            edges: this.dd.edges,
                            data: this.dd.nodes,
                        }]
                    })
                }
            },
            created() {
                this.data()
            },
        })
    </script>

</body>

</html>